<template>
  <div class="hello">
    <div class="navHeader">
      <div class="navHeader-logo">
        <img src="@/assets/headerlogo.png" />
      </div>

      <div class="navHeader-center">
        <div
          :class="['navHeader-center-item', item.name == 'HOME' ? 'navHeader-center-action' : '']"
          v-for="(item, index) in navList"
          :key="index"
          @mouseenter="showItem(item)"
          @mouseleave="closeItem(item)"
        >
          <router-link :to="item.path">{{ item.name }}</router-link>

          <div class="navHeader-center-item-list" v-if="isShow">
            <div
              :class="['navHeader-center-item-list-item', item.name == 'PERSONAL DETAILS' ? 'navHeader-center-action' : '']"
              v-for="(ele, i) in item.children"
              :key="i"
            >
              <router-link :to="ele.path">{{ ele.name }}</router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="navHeader-logo2">
        <img src="@/assets/dq.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Header',
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      action: false,
      navList: [
        {
          name: 'HOME',
          path: '/Home'
        },
        {
          name: 'ABOUT',
          path: ''
        },
        {
          name: 'GUIDE',
          path: ''
        },
        {
          name: 'MEDIA',
          path: ''
        },
        {
          name: 'MYMPF',
          path: '/MyMpf',
          children: [
            { name: 'PERSONAL DETAILS', path: '/PersonalDetails', flag: 'child' },
            { name: 'MY AGENDA', path: '' },
            { name: 'MPF SERVICE', path: '' },
            { name: 'QR CODE', path: '' },
            { name: 'MY ASSISTANT', path: '' },
            { name: 'MY COMPANION', path: '' }
          ]
        },
        {
          name: 'MANAGEMENT',
          path: ''
        },
        {
          name: 'CONTACT',
          path: ''
        }
      ],
      isShow: false
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    showItem(item) {
      if (item.name == 'MYMPF') {
        this.isShow = true;
      }
    },
    closeItem(item) {
      this.isShow = false;
    }
  }
};
</script>

<style scoped lang="scss">
@mixin navheight() {
  height: 110px;
}
.navHeader {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  line-height: 80px;
  // background-image: url('@/assets/header.png');
  // background-size: 100% 100%;

  &-logo {
    width: 20%;
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 30px;
    border-right: 1px solid #fff;
    padding: 10px 0;
    img {
      width: 130px;
      height: 60px;
    }
  }
  &-logo2 {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
    }
  }

  &-center {
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    font-size: 15px;
    &-item {
      a {
        display: block;
        text-decoration: none;
        color: white;
        padding: 0 20px;
      }
      text-align: center;
      width: 15%;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      &:hover {
        background-color: #8fc31f;
      }
      &-list {
        text-align: left;
        font-size: 13px;
        width: 100%;
        position: absolute;
        left: 0px;
        z-index: 1;
        background: #22ac38;
        display: flex;
        flex-direction: column;
        line-height: 30px;
        &-item {
          padding: 0 6px;
          margin: 4px 0;
          a {
            padding: 0;
          }
          &:hover {
            background-color: #8fc31f;
          }
        }
      }
    }
  }
  &-action {
    background-color: #8fc31f;
  }
}
.navHeader-center-action {
  background-color: #8fc31f !important;
}
</style>
